@charset "utf-8"

html, body
    margin 0
    padding 0
    -webkit-user-select none
    position relative
    height 100%
body
    font 16px/32px fonts
    color text
    background background
    cursor default
    overflow hidden

:focus
    outline 0

[disabled]
    opacity 0.5
    filter grayscale(1)
    position relative
    &:after
        content " "
        display block
        cursor not-allowed
        top 0
        left 0
        right 0
        bottom 0
        position absolute

.error
    color error
.success
    color success
.warning
    color warning

.borderall
    border 1px solid borderBright
.borderleft
    border-left 1px solid borderBright
.borderright
    border-right 1px solid borderBright
.bordertop
    border-top 1px solid borderBright
.borderbottom
    border-bottom 1px solid borderBright

.tall
    height 100%
    overflow auto
    box-sizing border-box

// перекрытие
.stretch
    position fixed
    top 0
    left 0
    right 0
    bottom 0

.short
    width 4em

// прогрессбары
.progressbar
    min-width 10em
    position relative
    border-radius br
    border 1px solid borderBright
    height 1.5em
    vertical-align middle
    display inline-block
    div
        border-radius br
        background act
        position absolute
        top 0
        left 0
        bottom 0
        width 50%
    &.warning div
        background warning
    &.success div
        background success
    &.error
        background error


// оверлей загрузки
div#loading
    position fixed
    left 0
    right 0
    top 0
    bottom 0
    line-height 86vh
    text-align center
    z-index 50
    background background
    font-size 4vw
    font-weight 300

.aCodeEditor
    position absolute
    left 0
    top 0
    width 100%
    height 100%

@keyframes rotate
    100%
        transform rotate(360deg)
@keyframes fadeOut
    from
        opacity 1
        visibility visible
    to
        opacity 0
        visibility hidden
.fadeout
    animation forwards 0.5s linear fadeOut

@keyframes jello
    from, to
        transform translate3d(0, 0, 0)
    10%
        transform skewY(12.5deg)
    20%
        transform skewY(-9deg)
    30%
        transform skewY(6.25deg)
    40%
        transform skewY(-3.125deg)
    50%
        transform skewY(1.5625deg)
    70%
        transform skewY(-0.78125deg)
    80%
        transform skewY(0.390625deg)

.jello
    animation-name jello
    transform-origin center
    animation-duration 1s
    animation-fill-mode both

/* Icons */

icon(icon = 'slash', color = act)
    background unquote(
        replace('currentColor', replace(
            '#', '%23', (''+color)
        ), embedurl('./../icons/'+icon+'.svg', 'utf8'))
    ) center center / contain

.feather, .icon
    width 1.5rem
    height 1.5rem
    vertical-align -0.35em
    h1 &, h2 &
        vertical-align bottom

.icon
    stroke none
    fill currentColor
.feather
    stroke currentColor
    stroke-width 2
    stroke-linecap round
    stroke-linejoin round
    fill none